import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true;
    width: 640;
    height: 480;
    title: qsTr("Animation");
    visibility: Window.Maximized;

    ListModel {
        id: listModel;
        ListElement { name: qsTr("Animation Item"); isChecked: true; item: "DAnimation.qml"; }
        ListElement { name: qsTr("RocketAnimation Item"); isChecked: false; item: "RocketItem.qml"; }
        ListElement { name: qsTr("EasingAnimation Item"); isChecked: false; item: "EasingCurvesItem.qml"; }
        ListElement { name: qsTr("GroupAnimation Item"); isChecked: false; item: "GroupAnimation.qml"; }
        ListElement { name: qsTr("GroupAnimation2 Item"); isChecked: false; item: "GroupAnimation2.qml"; }
        ListElement { name: qsTr("TrafficLight Item"); isChecked: false; item: "TrafficLight.qml"; }
    }

    Rectangle {
        id: rectList;

        width: 150;
        color: "white";
        anchors.left: parent.left;
        anchors.top: parent.top;
        anchors.bottom: parent.bottom;

        Column {
            id: column;

            anchors.fill: parent;
            spacing: 1;

            Repeater {
                model: listModel;

                DButton {
                    id: btnCtrl;
                    height: 40;
                    width: column.width;
                    text: name;
                    checked: isChecked;

                    onClicked: {
                        buttonClicked(index);
                    }
                }
            }
        }

        Rectangle {
            width: 1;
            color: "gray";
            anchors.top: parent.top;
            anchors.right: parent.right;
            anchors.bottom: parent.bottom;
        }
    }

    Rectangle {
        id: rectTitle;
        color: "white";
        height: 40;
        anchors.left: rectList.right;
        anchors.top: parent.top;
        anchors.right: parent.right;

        Text {
            id: textTitle;
            font.pointSize: 20;
            font.family: "Consolas";
            anchors.fill: parent;
            horizontalAlignment: Qt.AlignHCenter;
            verticalAlignment: Qt.AlignVCenter;
        }

        Rectangle {
            height: 1;
            color: "gray";
            anchors.left: parent.left;
            anchors.right: parent.right;
            anchors.bottom: parent.bottom;
        }
    }

    Loader {
        id: loader;
        anchors.left: rectList.right;
        anchors.top: rectTitle.bottom;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
    }

    Component.onCompleted: {
        textTitle.text = listModel.get(0).name;
        loader.source = listModel.get(0).item;
    }

    //判断按钮点击
    function buttonClicked(nIndex) {
        for(var i = 0; i < listModel.count; ++i)
        {
            if ( i === nIndex)
            {
                listModel.setProperty(i, "isChecked", true);
            }
            else
            {
                listModel.setProperty(i, "isChecked", false);
            }
        }
        loader.source = listModel.get(nIndex).item;
        textTitle.text = listModel.get(nIndex).name;
    }
}
